<!-- src/views/sandi/shuzi.vue -->
<template>
  <div class="number-display">
    <!-- 标题 -->
    <span class="title">总访问量</span>
    
    <!-- 数字显示区域 -->
    <svg width="200" height="60" viewBox="0 0 200 60">
      <!-- 每个数字是一个独立的 <g> 组 -->
      <g v-for="(digit, index) in digits" :key="index" transform="translate(30 * index, 0)">
        <!-- 背景矩形（带渐变） -->
        <rect x="0" y="0" width="25" height="40" rx="4" fill="url(#grad)" />
        <!-- 数字文本 -->
        <text x="12.5" y="25" text-anchor="middle" font-size="20" font-weight="bold" fill="#fff" dominant-baseline="central">
          {{ digit }}
        </text>
      </g>

      <!-- 渐变定义 -->
      <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#4CAF50" />
          <stop offset="100%" stop-color="#2E7D32" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'

export default defineComponent({
  name: 'Shuzi',
  setup() {
    const digits = ref<string[]>(['1', '2', '3', '4', '5']) // 初始值：12345
    let counter = 12345 // 当前数值

    // 每秒更新一次数字
    const timer = setInterval(() => {
      counter++
      const numStr = counter.toString() // 不补零！直接转字符串
      digits.value = numStr.split('') // 拆分成数组
    }, 1000)

    // 清理定时器
    onUnmounted(() => {
      clearInterval(timer)
    })

    return {
      digits
    }
  }
})
</script>

<style scoped>
.number-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}
</style>